<!--
 * @Author: mayijun
 * @Date: 2022-06-25 17:07:56
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-11 14:30:36
-->
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { IconLeft } from '@arco-design/web-vue/es/icon';
import Bus from '@/utils/emmit';
import { useRouter, useRoute } from 'vue-router';
import { debounce } from 'lodash';
import SaveDialog from '@/views/indexDevelop/develop/components/saveDialog/index.vue';
const route = useRoute();
let status = ref<any>(route.query.status);
let metricsType: any = route.query.metricsType;
const router = useRouter();

const state = reactive({
  title: '',
  visible: false,
  type: 0
});
const handleIndexSave = debounce(
  (n: number) => {
    if (metricsType == 3) {
      state.title = n == 1 ? '保存并上线' : '保存';
      state.visible = true;
      state.type = n;
    } else if (metricsType == 2) {
      Bus.emit('saveDerive', n); // 草稿
    } else {
      Bus.emit('saveMetrics', n); // 草稿
    }
  },
  1000,
  {
    leading: true,
    trailing: false
  }
);
</script>

<template>
  <div class="table-header dis-flex align-items space-between">
    <div class="table-header_l">
      <span
        class="col_333 fw cp"
        @click="
          () => {
            router.go(-1);
          }
        "
      >
        <icon-left />
        返回
      </span>
      <span class="col_333 fw ml-10">指标开发工作台</span>
    </div>
    <div class="table-header-r">
      <a-button
        @click="
          () => {
            router.go(-1);
          }
        "
        >取消</a-button
      >
      <a-button
        :disabled="status === 1 || status === '1'"
        @click="handleIndexSave(1)"
        >保存并上线</a-button
      >
      <a-button
        :disabled="status === 1 || status === '1'"
        type="primary"
        @click="handleIndexSave(0)"
        >保存</a-button
      >
    </div>
    <SaveDialog
      :title="state.title"
      v-model:visible="state.visible"
      @saveItem="
        (item) => {
          Bus.emit('saveFromDerive', state.type, item.remark);
        }
      "
    ></SaveDialog>
  </div>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>